<!--
 * hi-radio - 单选框
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-radio" :class="_classes" :style="_styles" :hover="hover" @tap="handleClick">
        <view class="hi-radio__box">
            <hi-icon class="hi-radio__icon" :name="icon"></hi-icon>
        </view>
        <view class="hi-radio__label" v-if="label !== undefined && label !== null && label !== ''">
            <slot>{{ label }}</slot>
        </view>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { ref, computed, inject, onMounted } from "vue";
    import props from "./props.js";

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["update:modelValue", "click"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 是否禁用
        if (_props.disabled) classes.push(`hi-disabled hi-radio--disabled`);

        // 选中
        if (_isChecked.value || _props.checked) classes.push(`hi-radio--checked`);

        // 边框
        if (_props.border) classes.push(`hi-radio--border`);

        // 方形
        if (_props.square) classes.push(`hi-radio--square`);

        // 主题
        if (_props.theme) classes.push(`hi-radio--theme hi-radio--theme-${_props.theme}`);

        // 镂空
        if (_props.plain) classes.push("hi-radio--plain");

        // 浅化背景
        if (_props.tint) classes.push("hi-radio--tint");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // Label
        if (_props.labelColor) styles.push(`--hi-radio-label-color: ${_props.labelColor};`);
        if (_props.labelFontSize) styles.push(`--hi-radio-label-font-size: ${_props.labelFontSize};`);

        // Icon
        if (_props.iconColor) styles.push(`--hi-radio-icon-color: ${_props.iconColor};`);
        if (_props.iconSize) styles.push(`--hi-radio-icon-font-size: ${_props.iconSize};`);

        // 选择框大小
        if (_props.size) styles.push(`--hi-radio-size: ${_props.size};`);

        // 选择框未激活
        if (_props.inactiveColor) styles.push(`--hi-radio-inactive-color: ${_props.inactiveColor};`);
        if (_props.inactiveBorderColor) styles.push(`--hi-radio-inactive-border-color: ${_props.inactiveBorderColor};`);

        // 选择框激活时
        if (_props.activeColor) styles.push(`--hi-radio-active-color: ${_props.activeColor};`);
        if (_props.activeBorderColor) styles.push(`--hi-radio-active-border-color: ${_props.activeBorderColor};`);
        if (_props.activeLabelColor) styles.push(`--hi-radio-active-label-color: ${_props.activeLabelColor};`);

        // 选择框圆角
        if (_props.radius) styles.push(`--hi-radio-border-radius: ${_props.radius};`);

        // 边框宽度
        if (_props.borderWidth) styles.push(`--hi-radio-border-width: ${_props.borderWidth};`);

        // 主题
        if (_props.theme) styles.push(`--hi-radio-theme: var(--hi-theme-${_props.theme})`);

        // 浅化透明度
        if (_props.tintOpacity) styles.push(`--hi-radio-background-opacity: ${_props.tintOpacity}`);

        return styles;
    });

    // 单选框组选中的值
    let groupValue = inject("hiRadioGroupValue", ref(null));

    // 是否选中
    const _isChecked = computed(() => groupValue.value === _props.value);

    // 单选框组的值更新函数
    let updateGroupValue = inject("hiRadioGroupUpdateValue", () => {});

    /**
     * 点击事件
     */
    function handleClick() {
        _emits("click");
        // 组合使用时
        updateGroupValue(_props.value);
    }
</script>

<style lang="scss" scoped>
    .hi-radio {
        display: var(--hi-radio-display, inline-block);

        &__box {
            display: var(--hi-radio-box-display, inline-flex);
            vertical-align: var(--hi-radio-box-vertical-align, middle);
            width: var(--hi-radio-size, 1.25em);
            height: var(--hi-radio-size, 1.25em);
            align-items: var(--hi-radio-box-align-items, center);
            justify-content: var(--hi-radio-box-justify-content, center);
            flex-shrink: var(--hi-radio-box-flex-shrink, 0);
            background: var(--hi-radio-inactive-color, var(--hi-background-default));
            position: var(--hi-radio-box-position, relative);
            border: var(--hi-radio-border-width, 0) var(--hi-radio-border-style, solid)
                var(--hi-radio-inactive-border-color, var(--hi-radio-theme, currentColor));
            border-radius: var(--hi-radio-border-radius, 50%);
        }

        &__icon {
            opacity: 0;
            transform: scale(0);
            transition: var(--hi-radio-transition, 100ms);
            color: var(--hi-radio-icon-color, #ffffff);
            font-size: var(--hi-radio-icon-font-size, calc(var(--hi-radio-size, 1.25em) * 0.8));
            position: relative;
            z-index: 5;
        }

        &__label {
            display: var(--hi-radio-label-display, inline-block);
            vertical-align: var(--hi-radio-label-vertical-align, middle);
            color: var(--hi-radio-label-color, inherit);
            font-size: var(--hi-radio-label-font-size, inherit);
            margin: var(--hi-radio-label-margin, 0 0 0 5px);
        }

        &--checked {
            .hi-radio__box {
                background: var(--hi-radio-active-color, var(--hi-theme-primary));
                border-color: var(--hi-radio-active-border-color, var(--hi-radio-theme, currentColor));
            }

            .hi-radio__label {
                color: var(--hi-radio-active-label-color, var(--hi-radio-label-color, inherit));
            }

            .hi-radio__icon {
                opacity: 1;
                transform: scale(1);
            }
        }

        &--square {
            .hi-radio__box {
                border-radius: var(--hi-radio-border-radius, 2px);
            }
        }

        &--border {
            .hi-radio__box {
                border-width: var(--hi-radio-border-width, 1px);
            }
        }

        // 主题
        &--theme {
            .hi-radio__box {
                background: var(--hi-radio-inactive-color, var(--hi-radio-theme, var(--hi-radio-inactive-color, var(--hi-background-default))));
            }
        }

        // 镂空
        &--plain {
            .hi-radio__box {
                border-width: var(--hi-radio-border-width, 1px);
                background: var(--hi-radio-inactive-color, transparent);
            }

            .hi-radio__icon {
                color: var(--hi-radio-icon-color, var(--hi-radio-theme, inherit));
            }
        }

        // 浅化
        &--tint {
            .hi-radio__box {
                background: transparent;
            }

            .hi-radio__icon {
                color: var(--hi-radio-icon-color, var(--hi-radio-theme, #ffffff));
            }
            .hi-radio__box::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                z-index: 0;
                background: var(--hi-radio-inactive-color, var(--hi-radio-theme, var(--hi-background-default)));
                opacity: var(--hi-radio-background-opacity, 0.2);
                border-radius: inherit;
            }
        }
    }
</style>
